<!-- section-title: mdx -->

## MDX

<br />

> MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.

<br />

https://github.com/mdx-js/mdx

---

The below component is written by React and styled-components.

<br />
<br />
<br />
<br />
<br />

import { Sample } from '../scripts/sample';

<Sample />

---

```jsx
<!-- foo.mdx -->

import { Sample } from '../scripts/sample';

<Sample />
```

```javascript
// sample.js

import React from 'react';
import styled, { keyframes } from 'styled-components';

const rotate = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;

const Rotate = styled.h2`
  display: inline-block;
  animation: ${rotate} 3s linear infinite;
`;

export const Sample = () => <Rotate>Hello from jsx!!</Rotate>;
```
